import { useRef, useState } from "react";
// useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
//可用于存储任何可变值，包括对象和数组，而不会触发组件重新渲染，也可以用于获取DOM元素。

// 1.组件在重新渲染的时候，useRef的值不会被重新初始化。
// 2. 改变 ref.current 属性时，React 不会重新渲染组件。React 不知道它何时会发生改变，因为 ref 是一个普通的 JavaScript 对象。
// 3. useRef的值不能作为useEffect等其他hooks的依赖项，因为它并不是一个响应式状态。
// 4. useRef不能直接获取子组件的实例，需要使用forwardRef。

function UseRefFC() {
  // const divRef = useRef<HTMLDivElement>(null);
  const timer = useRef<null | NodeJS.Timeout>(null);
  const [count, setCount] = useState(0);
  const startTimer = () => {
    timer.current = setInterval(() => {
      setCount((pre) => pre + 1);
    }, 100);
  };

  const stopTimer = () => {
    clearInterval(timer.current as NodeJS.Timeout);
  };
  return (
    <>
      {/* <div ref={divRef}>111</div>
      <button
        onClick={() => {
          console.log(divRef.current);
        }}
      >
        点击获取dom元素
      </button> */}
      <div>
        <h1>计时器场景</h1>
        <div>{count}</div>
        <button onClick={startTimer}>开始计时</button>
        <button onClick={stopTimer}>停止计时</button>
      </div>
    </>
  );
}

export default UseRefFC;
